<template>
  <f7-page>
    <f7-navbar title="标签" back-link></f7-navbar>

      <div class="tien-bar bg-white solid-bottom">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>标签形状
        </div>
      </div>

      <div class="padding bg-white border-bottom">
        <div class="tien-tag ">默认</div>
        <div class="tien-tag round margin-lr">椭圆</div>
        <div class="tien-tag radius">圆角</div>
      </div>

      <div class="tien-bar bg-white margin-top">
        <div class="action">
          <span class="tien-icon-title text-blue"></span>标签尺寸
        </div>
      </div>
      <div class="padding bg-white">
        <div class='tien-tag radius sm '>小尺寸</div>
        <div class='tien-tag radius margin-lr'>普通尺寸</div>
      </div>
      <div class="tien-bar bg-white margin-top">
        <div class="action">
          <span class="tien-icon-title text-blue"></span>标签颜色
        </div>
      </div>
      <div class="padding-sm flex flex-wrap">
        <div class="padding-xs" v-for="(item,idx) in ColorList" >
          <div :class="'bg-'+item.name" class="tien-tag">{{item.title}}</div>
        </div>
        <div class="padding-xs" v-for="(item,idx) in ColorList" v-if="index<12">
          <div :class="'bg-'+item.name" class="tien-tag light" >{{item.title}}</div>
        </div>
      </div>
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>镂空标签
        </div>
      </div>
      <div class='padding-sm flex flex-wrap'>
        <div class="padding-xs" v-for="(item,idx) in ColorList">
          <div :class="'line-'+item.name" class="tien-tag light"  >{{item.title}}</div>
        </div>
      </div>
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>胶囊样式
        </div>
      </div>
      <div class="padding">
        <div class="tien-capsule">
          <div class='tien-tag bg-red'>
            <span class='tien-icon-likefill'></span>
          </div>
          <div class="tien-tag line-red">
            12
          </div>
        </div>
        <div class="tien-capsule round">
          <div class='tien-tag bg-blue '>
            <span class='tien-icon-likefill'></span>
          </div>
          <div class="tien-tag line-blue">
            23
          </div>
        </div>
        <div class="tien-capsule round">
          <div class='tien-tag bg-blue '>
            说明
          </div>
          <div class="tien-tag line-blue">
            123
          </div>
        </div>
        <div class="tien-capsule radius">
          <div class='tien-tag bg-grey '>
            <span class='tien-icon-likefill'></span>
          </div>
          <div class="tien-tag line-grey">
            23
          </div>
        </div>
        <div class="tien-capsule radius">
          <div class='tien-tag bg-brown sm'>
            <span class='tien-icon-likefill'></span>
          </div>
          <div class="tien-tag line-brown sm">
            23
          </div>
        </div>
      </div>
      <div class="tien-bar bg-white margin-top">
        <div class='action'>
          <span class='tien-icon-title text-blue'></span>数字标签
        </div>
      </div>
      <div class="padding flex justify-between align-center ">
        <div class='tien-avatar xl radius bg-white '>
          <span class="text-blue">港</span>
          <div class="tien-tag badge">99+</div>
        </div>
        <div class='tien-avatar xl radius ' style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);">
          <div class='tien-tag badge'>9</div>
        </div>
        <div class='tien-avatar xl radius bg-white'>
          <div class='tien-tag badge'>99</div>
          <span class='tien-icon-people text-blue'></span>
        </div>
        <div class='tien-avatar xl radius bg-white'>
          <div class='tien-tag badge'>99+</div>
        </div>
      </div>
      
  </f7-page>
</template>

<script>
import '../../css/colorui/tag.css';
export default {
  name:'tag',
  data() {
    return {
      ColorList: [{
        title: '嫣红',
        name: 'red',
        color: '#e54d42'
      },
      {
        title: '桔橙',
        name: 'orange',
        color: '#f37b1d'
      },
      {
        title: '明黄',
        name: 'yellow',
        color: '#fbbd08'
      },
      {
        title: '橄榄',
        name: 'olive',
        color: '#8dc63f'
      },
      {
        title: '森绿',
        name: 'green',
        color: '#39b54a'
      },
      {
        title: '天青',
        name: 'cyan',
        color: '#1cbbb4'
      },
      {
        title: '海蓝',
        name: 'blue',
        color: '#0081ff'
      },
      {
        title: '姹紫',
        name: 'purple',
        color: '#6739b6'
      },
      {
        title: '木槿',
        name: 'mauve',
        color: '#9c26b0'
      },
      {
        title: '桃粉',
        name: 'pink',
        color: '#e03997'
      },
      {
        title: '棕褐',
        name: 'brown',
        color: '#a5673f'
      },
      {
        title: '玄灰',
        name: 'grey',
        color: '#8799a3'
      },
      {
        title: '草灰',
        name: 'gray',
        color: '#aaaaaa'
      },
      {
        title: '墨黑',
        name: 'black',
        color: '#333333'
      },
      {
        title: '雅白',
        name: 'white',
        color: '#ffffff'
      },
    ]
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

